import React, { Component } from 'react';
import MarkDown from 'react-markdown';
import { ScrollBox, Button, message, GradientsBar, Loading, Icon } from '../../../components/exports';

import '../style/block.scss';
import Title from './others/title';
import ShowCode from './others/showCode';
import { WordBlock } from './others/wordBlock';

const words1 = [
	''
]

const block1 = {
	gui: (
		<React.Fragment>
			<Button
				onClick={()=>{
					message.info('this is the first test', 3000)
				}}
			>消息</Button>
			<Button
				gradients='SunnyMorning'
				onClick={()=>{
					message.warning('this is the first test', 3000)
				}}
			>警告</Button>
			<Button
				gradients='RipeMalinka'
				onClick={()=>{
					message.danger('this is the first test', 3000)
				}}
			>危险</Button>
			<Button
				gradients='Nega'
				onClick={()=>{
					message.danger('this is the first test', 3000, {
						onClose: function(e){

						},
						gradients: 'PassionateBed'
					})
				}}
			>渐变色</Button>
			<Button
				gradients='NewLife'
				onClick={()=>{
					message.loading('this is the first test',Math.pow(100,10), {})
				}}
			>加载中.....</Button>
		</React.Fragment>
	),
	code: (
		<div></div>
	)
}

export default class Message extends Component<any>{
	render() {
		return (
			<ScrollBox>
				<Title content={['Message','消息']}/>
				<p>全局展示操作反馈信息。</p>
				<Title level={2} content={['使用场合']}/>
				<WordBlock
					words={[
						"可提供成功、警告和错误等反馈信息",
						"居中显示，自动消失（默认3.5s），是一种不打断用户操作的轻量级提示方式"
					]}
				/>
				<Title level={2} content={['使用实列']}/>
				<ShowCode left={block1.gui}/>
			</ScrollBox>
		)
	}
}
